<template>
  <div class="row">
    <div class="col-xs-12">
      <Portlet title="基本信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="140">姓名：</td>
            <td width="18%">{{userInfo.name}}</td>
            <td width="120">手机号:</td>
            <td width="18%">{{userInfo.registerPhone}}</td>
            <td width="120">仓库面积:</td>
            <td width="18%">{{userInfo.area || 0}} m³</td>
            <td width="120">从事该行业:</td>
            <td width="18%">{{userInfo.workYear || 0}} 年</td>
          </tr>
          <tr v-for="(car, index) in userInfo.fhbWorkerCars" :key="index">
            <td>车辆类型：</td>
            <td>{{car.type}}</td>
            <td>车牌号:</td>
            <td>{{car.plateNumber}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <Portlet title="服务信息">
        <table class="table show-table">
          <tbody>
          <tr>
            <td width="120">服务范围：</td>
            <td width="80%">
              <p v-for="(item, index) in tempArr" :key="index">
                {{item.key + ' : (' + item.value + ')'}}
              </p>
            </td>
          </tr>
          <tr v-for="(service, index) in userInfo.serviceBusinesses" :key="index">
            <td>{{service.businessName}}</td>
            <td>{{service.serviceName}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <Portlet title="服务承诺">
        <table class="table show-table">
          <tbody>
          <tr>
            <td>1.{{bighomeServiceCommitment.carrySubjectCode | filterDataBaseDictionary}}</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;&nbsp;{{bighomeServiceCommitment.freeForCarry}}</td>
          </tr>
          <tr>
            <td>2.{{bighomeServiceCommitment.overmileSubjectCode | filterDataBaseDictionary}}</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;&nbsp;{{bighomeServiceCommitment.coastForOvermile}}</td>
          </tr>
          <tr>
            <td>3.{{bighomeServiceCommitment.storageSubjectCode | filterDataBaseDictionary}}</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;&nbsp;{{bighomeServiceCommitment.freeForStorage}}</td>
          </tr>
          <tr>
            <td>4.{{bighomeServiceCommitment.uniformSubjectCode | filterDataBaseDictionary}}</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;&nbsp;{{bighomeServiceCommitment.serviceOnUniform}}</td>
          </tr>
          <tr>
            <td>5.{{bighomeServiceCommitment.basicSubjectCode | filterDataBaseDictionary}}</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;&nbsp;{{bighomeServiceCommitment.basicCommitment}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>

      <Portlet title="结算方式">
        <el-button slot="tools" @click.prevent="submit" type="primary">{{ isClearEditing ? '保存' : '修改' }}</el-button>
        <el-form v-if="isClearEditing" class="el-form-col" inline :model="model" label-position="right" ref="elForm"
                 label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item ref="clearingFormFromItem">
                <el-radio v-model="model.clearingForm" label="clearingForm-1">按点结算</el-radio>
              </el-form-item>

              <el-form-item prop="clearingRatio" v-if="model.clearingForm == 'clearingForm-1'" :rules="[
                {required: true, message: '结算比例必须', trigger: 'blur'},
                {validator: isInteger, message: '比例必须是整形', trigger: 'blur'},
                {validator: range, min: 0, max: 100, message: '比例必须在0~100之间', trigger: 'blur'}
              ]" label="结算比例">
                <el-input placeholder="结算比例" v-model="model.clearingRatio">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="clearingForm" ref="clearingFormFromItem" :rules="[
                {required: true, message: '结算方式必须', trigger: 'change'}
              ]">
                <el-radio v-model="model.clearingForm" label="clearingForm-2">工资结算</el-radio>
              </el-form-item>
              <el-form-item prop="basePay" v-if="model.clearingForm == 'clearingForm-2'" :rules="[
                {required: true, message: '基本工资必须', trigger: 'blur'},
                {validator: isFormatNumber, int: 10, message: '基本工资是小数最多2位的数字,整数最大10位', trigger: 'blur'}
              ]" label="基本工资">
                <el-input placeholder="基本工资" v-model="model.basePay">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-form v-if="!isClearEditing" inline label-position="left">
          <template v-if="model.clearingForm">

            <el-col :lg="8" :md="12" :xl="6" v-if="model.clearingForm == 'clearingForm-2'">
              <el-form-item>
                {{ model.clearingForm | filterDataBaseDictionary }}
              </el-form-item>
              <el-form-item style="margin-left: 30px">
                基本工资： {{ model.basePay }} 元
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="12" :xl="6" v-else-if="model.clearingForm == 'clearingForm-1'">
              <el-form-item>
                {{ model.clearingForm | filterDataBaseDictionary }}
              </el-form-item>
              <el-form-item style="margin-left: 30px;">
                <span>结算比例： {{ model.clearingRatio }} %</span>
              </el-form-item>
            </el-col>

          </template>
          <el-col v-else :span="24">
            <el-form-item>
              <span>点击【修改】按钮，可对师傅设置结算方式，结算方式分为“比例结算”和“工资结算”两种方式。</span>
            </el-form-item>
          </el-col>
        </el-form>

      </Portlet>
    </div>
  </div>
</template>
<script>
import {dotData, copy, alert, confirm} from '@/utils'
import {filterDataBaseDictionary} from '@/filters'
import {isInteger, isFormatNumber, range} from '@/utils/validate'
export default {
  name: 'WarehousingShow',
  filters: {
    filterDataBaseDictionary
  },
  data() {
    return {
      id: this.$route.params.id,
      resourceType: this.$route.query.resourceType,
      userInfo: {},
      tempArr: [],
      model: {
        clearingForm: '',
        basePay: '',
        resourceType: this.$route.query.resourceType,
        clearingRatio: ''
      },
      submitLoading: false,
      isClearEditing: false
    }
  },
  created() {
    this.getDetail()
  },
  computed: {
    bighomeServiceCommitment() {
      return dotData(this.userInfo, 'bighomeServiceCommitment') || {}
    }
  },
  watch: {
    'model.clearingForm'(val, oldVal) {
      if (val === oldVal) {
        return
      }
      // validateField
      if (this.$refs.elForm) {
        this.$refs.elForm.validateField('clearingForm')
      }
    }
  },
  methods: {
    isInteger,
    isFormatNumber,
    range,
    // 合并组装省市区
    merge(dataset) {
      var temp = {}
      var rt = []
      var keys = []
      for (var i in dataset) {
        var key = dataset[i]['province'] + '' + dataset[i]['city']
        if (temp[key]) {
          temp[key] += ',' + dataset[i]['district']
        } else {
          temp[key] = []
          keys.push(key)
          temp[key].push(dataset[i]['district'])
        }
      }
      for (let k = 0; k < keys.length; k++) {
        rt.push({key: keys[k], value: temp[keys[k]]})
      }
      this.tempArr = rt
    },
    getDetail() {
      let url = ''
      switch (this.resourceType) {
        case 'TH':
          url = '/ms-warehouse-order/resourceManage/getPickUpDetail' // 提货资源
          break
        case 'EZ':
          url = '/ms-warehouse-order/resourceManage/getSecondaryDetail' // 干线资源
          break
        case 'DI':
          url = '/ms-warehouse-order/resourceManage/getDeliversAndInstallDetail' // 配安资源
          break
      }
      if (!url) {
        alert('资源类型未获取')
        return
      }
      this.$ajax.get(url, {id: this.id}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          const data = dotData(response, 'data')
          if (data) {
            this.userInfo = data
            if (Array.isArray(this.userInfo.coverDistrictList)) {
              this.merge(this.userInfo.coverDistrictList)
            }
          }
          // 对可编辑的内容进行赋值
          this.model.clearingForm = dotData(response, 'data.clearingForm')
          this.model.basePay = dotData(response, 'data.basePay')
          this.model.clearingRatio = dotData(response, 'data.clearingRatio')
        }
      }).finally(_ => {
      })
    },
    // 保存结算方式
    submit() {
      if (this.isClearEditing) {
        this.$refs.elForm.validate(result => {
          if (!result) {
            alert('验证未通过')
            return
          }
          let data = copy(this.model, true)
          data.id = this.id
          this.submitLoading = true
          this.$ajax.post('/ms-warehouse-order/resourceManage/editClearingForm', data).then(response => {
            if (response.success) {
              confirm('保存成功', '提示', {type: 'success'}).finally(_ => {
                this.isClearEditing = !this.isClearEditing
              })
            }
          }).finally(_ => {
            this.submitLoading = false
          })
        })
      } else {
        this.isClearEditing = !this.isClearEditing
      }
    }
  }
}
</script>
